
import UsersApi from "../../api/admins.js";
import Base from "../base.js";

export default class extends Base {
  //  渲染函数
  render() {
    this.$el.html(`
    
    <section class="w3l-login">
		<div class="overlay">
			<div class="wrapper">
				<div class="logo">

				</div>
				<div class="form-section">
					<h3>Login</h3>
					
						<div class="form-input">
							<input type="text" name="Username" placeholder="请输入账号" required="" value="z3">
						</div>
						<div class="form-input">
							<input type="password" name="password" placeholder="密码" required="" value="123">
						</div>
  
            <button type="submit" class="btn btn-primary theme-button mt-4" id="login-btn">登录</button>
            <p class="remember signup"><a href="#reload" class="signuplink">忘记密码?</a></p>
			
					<p class="remember signup">还没有账号? <a href="#reg" class="signuplink">注册</a>	</p>
				</div>
			</div>
		</div>
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>
	</section>

   `);

    this.$usernameEle = $("input[name=Username]");
    this.$passwordEle = $("input[name=password]");
    this.$loginBtn = $("#login-btn");
    this.$regBtn = $("span[class=reg-btn]");
 
  }
  async loginHandle() {
    const username = this.$usernameEle.val();
    const password = this.$passwordEle.val();
    // 获取服务端返回值 status 判断登录是否成功
    const { status, token } = await UsersApi.login({ username, password });
    if (status) {
      // 存储令牌
      UsersApi.setToken(token);
      layer.msg("登录成功");
      location.hash = "#/info/movies";
    } else {
      layer.msg("登录失败！请检查您的用户名和密码是否正确！")
    }
  };

  regHandle() {
    //注册页面跳转
    location.hash = "#/reg"
  }


  
  // 交互能力
  handle() {
    this.$loginBtn.on("click", this.loginHandle.bind(this));
    this.$regBtn.on("click", this.regHandle.bind(this));
  }
}


